<template>
  <div style="padding: 16px;">
    <div v-for="(data,index) in nodeData" :key="index">
      <div class="timelineline1" style="margin-bottom:8px">
        <span class="name">{{ data.activityName }}</span>
        <span class="createTime"> {{ data.createTime }} </span>
      </div>
      <div class="card">
        <div v-for="(item,ind) in data.taskDetailViews" :key="ind" class="containers">
          <div class="timelineline1">
            <p class="assigneeName">{{ item.operator }}</p>
            <p v-if="dealList && data.activityName !== '人工'" class="deal">
              <i v-if="item.deal==10 ||item.processStatus=='1'" />
              <i v-else-if="item.deal==1" class="el-icon-success" style="color:#67C23A;margin-right: 4px;" />
              <i v-else-if="item.deal==2||item.deal==3||item.deal==6||item.deal==7" class="el-icon-error" style="color:#F56C6C;margin-right: 4px;" />
              <i v-else class="el-icon-success" style="color:#3461FF;margin-right: 4px;" />
              <span v-if="item.deal===null &&data.userTaskType !==2" style="color: #606266;">未审批</span>
              <span v-if="item.deal ===null && data.userTaskType ===2" style="color: #606266;">未提交</span>
              <span v-if="!(item.deal ==1 && data.userTaskType ==2)"
                    :style="item.deal==2||item.deal==3||item.deal==6||item.deal==7?'color:#F56C6C':item.deal==1?'color:#67C23A':item.deal==10?'color:#58B0A6':'color:#3461FF'">
                {{ item.deal?dealList[item.deal]:'' }}
              </span>
            </p>
          </div>
          <p class="message">{{ item.dealContent?item.dealContent.replace(/[，,]/g,"\n"):'' }}</p>
          <div class="timelineline1">
            <p class="duration">{{ item.duration?('处理耗时：'+item.duration):'' }}</p>
            <p> <span /><span class="endTime">{{ item.finishTime?item.finishTime:'' }}</span> </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import dictApi from '@/framework/api/dict'

export default {
  props: {
    nodeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  dicts: ['deal'],
  data() {
    return {
      dealList: {}
    }
  },
  created() {
    this.getdealList()
  },
  methods: {
    getdealList() {
      dictApi.fetchList('deal').then((res) => {
        this.dealList = res.data.reduce((acc, cur) => {
          acc[cur.dictCode] = cur.dictName
          return acc
        }, {})
      })
    }
  }

}
</script>
<style lang="scss" scoped>
  .timelineline1{
    display: flex;
    align-items: center;
    justify-content:space-between;
    height: 24px;
  }
  .name{
    font-size: 14px;
    font-weight: 500;
    color: #131414;
    line-height: 24px;
  }
  .createTime{
    font-size: 13px;
    font-weight: 300;
    color: #606266;
    line-height: 18px;
  }
  .card{
    padding: 8px 12px;
    border: 1px solid #DCDFE6;
    border-radius: 4px 4px 4px 4px;
  }
  .containers{
    border-bottom:1px dashed #DCDFE6;
    margin-bottom: 16px;
  }
  .containers:last-child{
    margin-bottom: 0px;
    border: 0px;
  }
  .assigneeName{
    font-size: 14px;
    color: #131414;
    line-height: 24px;
  }
  .deal{
    font-size: 14px;
    color: #606266;
    line-height: 24px;
  }
  .endTime{
    font-size: 12px;
    font-weight: 300;
    color: #606266;
    line-height: 20px;
  }
  .message{
    font-weight: 400;
    font-size: 14px;
    color: #131414;
    line-height: 24px;
    margin: 8px 0px 4px 0px;
    white-space: pre !important;
  }
  .duration{
    font-size: 12px;
    font-weight: 400;
    color: #909399;
    line-height: 20px;
  }
</style>
